<template>
  <div class="double-column-picture d-flex jc-between" :style="{ ...border }">
    <img
      class="picture fulled-h"
      :style="{ objectFit: imgList[0].objectFit }"
      :src="$staticRes(imgList[0].imgSrc || placeholder)"
    />
    <img
      class="picture fulled-h"
      :style="{ objectFit: imgList[0].objectFit }"
      :src="$staticRes(imgList[1].imgSrc || placeholder)"
    />
  </div>
</template>

<script>
  import { isNotEmpty } from '@/utils';
  import borderMixin from '@/mixins/borderMixin';

  export default {
    mixins: [borderMixin],
    props: {
      widget: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      this.placeholder = '/admin/images/marketing/landingPage/widgets/material/picture-placeholder.png';
      return {};
    },
    computed: {
      style() {
        return this.widget.style;
      },
      config() {
        return this.widget.config;
      },
      imgList() {
        return this.config.imgList;
      }
    },

    methods: {
      isNotEmpty
    }
  };
</script>

<style lang="scss" scoped>
  .double-column-picture {
    overflow: hidden;

    .picture {
      width: 49%;
    }
  }
</style>
